<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>最佳拍档</title>
    <meta name="keywords" content="最佳拍档">
    <meta name="description" content="最佳拍档">
</head>
<body>
    <div class="layui-tab-item layui-show">
        <div class="space-between">
            <div></div>
            <div class="u-flex u-pr-20">
                <div style="width: 250px;">
                    <input type="text" name="keyword" id="keyword" required lay-verify="required" placeholder="请输入关键字" autocomplete="off" class="layui-input" onkeydown="keydownSearch()">
                </div>
                <div class="u-pl-5">
                    <button type="button" class="layui-btn" onclick="search()">搜索</button>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12 u-pr-20">

                <table class="layui-table layui-form" lay-filter="EditListTable" id="EditListTable" lay-data="{id: 'tableid'}">
                    <thead>
                    <tr class="id36567">
                        <th lay-data="{checkbox:true}"></th>
                        <th lay-data="{field:'ruleName', align: 'center'}">规则名</th>
                        <th lay-data="{field:'ruleNum', align: 'center'}">编号</th>
                        <th lay-data="{field:'app', align: 'center'}">所属应用</th>
                        <th lay-data="{field:'compileFlag', align: 'center'}">编译</th>
                        <th lay-data="{field:'createUserName', align: 'center'}">添加者</th>
                        <th lay-data="{field:'ruleType', align: 'center'}">类型</th>
                        <th lay-data="{field:'createTime', align: 'center'}">最后更新</th>
                        <th lay-data="{field:'status', align: 'center'}">状态</th>
                        <th lay-data="{fixed: 'right', toolbar: '#barDemo', width: 200, align: 'center'}">操作</th>
                    </tr>
                    </thead>
                </table>
                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-xs" lay-event="run">运行</a>
                </script>
                <!-- 头部工具栏 -->
                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe624;</i>新增</button>
                        <button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
                    </div>
                </script>
            </div>
        </div>
    </div>
    <!--新增规则表单-->
    <div id="add_rule_model" style="display: none;">
        <form class="layui-form u-pr-50 u-pt-40" lay-filter="RuleForm" id="add_rule_form">
            <div class="layui-form-item">
                <label class="layui-form-label">所属应用</label>
                <div class="layui-input-block">
                    <input type="text" name="app" autocomplete="off" class="layui-input" placeholder="暂无" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">规则名称</label>
                <div class="layui-input-block">
                    <input type="text" name="ruleName" autocomplete="off" class="layui-input" placeholder="请填写规则名称" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">规则编号</label>
                <div class="layui-input-block">
                    <input type="text" name="ruleNum" autocomplete="off" class="layui-input" placeholder="请填写规则编号" lay-verify="required">
                </div>
            </div>
        </form>
    </div>
</body>

<script type="text/javascript">
    $('a[href="/tab/App_AppCenter"]').parent().addClass('layui-this');

    let getListUrl = '/rule/list';
    let ruleId = ""

    window.onload=function(){
        let url = window.location.pathname;
        ruleId = url.substring(url.lastIndexOf('/') + 1)
    }

    layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
        let layer = layui.layer, table = layui.table;
        let tableOptions = {
            elem: '#EditListTable',
            url: getListUrl, //请求地址
            method: 'POST', //方式
            id: 'EditListTable', //生成 Layui table 的标识 id，必须提供，用于后文刷新操作，笔者该处出过问题
            page: true, //是否分页
            contentType: 'application/json',
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            where: {}, //请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了 where: { key : { type: "all" } }，结果并不是我想的那样，如此写，key 将是后端的一个类作为参数，里面有 type 属性，如果误以为 key 是 Layui 提供的格式，那就大错特错了
            response: { //定义后端 json 格式，详细参见官方文档
                statusName: 'code', //状态字段名称
                statusCode: '200', //状态字段成功值
                msgName: 'msg', //消息字段
                countName: 'total', //总数字段
                dataName: 'rows' //数据字段
            },
            limit: 10,//每页显示条数
            limits: [10,20,50,100,150,200,300],//可选择范围
            defaultToolbar: ['filter'],
            toolbar: '#toolbar'
        };
        // 表初始化
        var createTable = function () {
            table.init('EditListTable', tableOptions);// table lay-filter
        };
        // 表刷新方法
        var reloadTable = function (item) {
            table.reload("tableid", { //此处是上文提到的 初始化标识id
                url: getListUrl,
                where: {}
            });
        };
        // 表初始化
        createTable();

        //监听行工具事件
        table.on('tool(EditListTable)', function (obj) {
            let data = obj.data;
            if (obj.event === 'edit') {
                window.location.href = "/tab/App_RuleCode?ruleId="+data.ruleId;
            }else if(obj.event === 'run'){
                run_rule(data.ruleNum);
            }
        });

        //头部工具栏按钮触发事件
        table.on('toolbar(EditListTable)', function(obj){
            //获取选中行
            let toolbar = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    add_rule();
                    break;
                case 'delete':
                    if(toolbar.data.length > 0){
                        let unids = [];
                        for (let i=0; i<toolbar.data.length; i++){
                            unids.push(toolbar.data[i].ruleId);
                        }
                        layer.confirm('确定删除选中的记录吗？', function (index) {
                            $.ajax({
                                url: '/rule/delete',
                                type: 'DELETE',
                                data: JSON.stringify(unids),
                                contentType: 'application/json',
                                dataType: 'json', // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
                                success: function (res) {
                                    layer.msg("删除成功");
                                    //两秒后重载表格数据
                                    setTimeout(function(){
                                        reloadTable();
                                    }, 2000);
                                }
                            });
                            layer.close(index);
                        });
                    }else{
                        layer.msg("请至少选中一项");
                    }
                    break;
            };
        });

    });

    //搜索
    function search(){
        layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
            let layer = layui.layer, table = layui.table;
            table.reload('tableid', {
                where: {
                    searchStr:$("#keyword").val()
                }
                ,page: {
                    pageNum: 1 //重新从第 1 页开始
                }
            });
        })
    }

    //回车搜索
    function keydownSearch() {
        let event = window.event || arguments.callee.caller.arguments[0];
        if (event.keyCode == 13)
        {
            search();
        }
    }

    //新增规则
    function add_rule(){
        layui.use('layer', function() {
            let layer = layui.layer;
            layer.open({
                type: 1
                ,title: '新增规则'
                , content: $('#add_rule_model')
                , area: 'auto'//定义宽和高
                , btnAlign: 'c' //按钮居中
                , shade: 0 //不显示遮罩
                ,btn: ['确定', '取消']
                , yes: function (index, layero) {
                    let ruleName = $('input[name="ruleName"]').val();
                    let ruleNum = $('input[name="ruleNum"]').val();
                    if(isNotNull(ruleName) && isNotNull(ruleNum)){
                        let sub_data = {
                            ruleName: ruleName,
                            ruleNum: ruleNum
                        }
                        $.ajax({
                            type:'POST',
                            url:'/rule/save',
                            data: JSON.stringify(sub_data),
                            dataType:'json',
                            contentType: 'application/json; charset=UTF-8',
                            success:function(req){
                                $("#add_rule_model").css("display","none");
                                layer.close(index);
                                layer.msg("新增成功！");
                                // 重载表格数据
                                reloadTable();
                                return false;
                            },
                            error:function(e){
                                $("#add_rule_model").css("display","none");
                                layer.close(index);
                                layer.msg("出错啦！");
                            }
                        })
                    }else{
                        layer.msg("请填写完整再进行提交噢！");
                    }
                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    $("#add_rule_model").css("display","none");
                    layer.close(index);
                }
                ,cancel: function(index, layero){
                    //右上角关闭回调
                    $("#add_rule_model").css("display","none");
                    layer.close(index);
                }
            });
        })
    }

    //刷新表格数据
    function reloadTable(){
        layui.use('table', function() {
            let table = layui.table;
            table.reload("tableid", { //此处是上文提到的 初始化标识id
                url: getListUrl,
                where: {}
            });
        })
    }

    //运行预览规则
    function run_rule(ruleNum) {
        window.open("/rule/preview?ruleNum="+ruleNum);
    }

</script>

</html>